<template>
  <t-button
    theme="primary"
    @click="handleOpenDialog('update', { id: props.id, senders: props.senders})"
    :disabled="props.readonly"
  >
    新增接收人
  </t-button>
  <!-- 自定义对话框 -->
  <custom-dialog
    ref="customDialogRef"
    v-slot="{ formData }"
    :api-map="{ update: addReceiver }"
    header="新增接收人"
    @request-success="handleDialogRequestSuccess"
  >
    <t-form-item label="接收人" name="senders" :rules="[{ required: true, message: '请输入接收人' }]">
      <t-cascader
        v-model:value="formData.senders"
        :options="sendersTree"
        :keys="{ value: 'id', label: 'name' }"
        placeholder=""
        filterable
        multiple
        clearable
      />
    </t-form-item>
    
  </custom-dialog>
</template>

<script setup lang="ts">
import { computed, ref, useTemplateRef } from 'vue';

import { addReceiver } from '@/api/notice/interaction';
import CustomDialog from '@/components/custom/dialog/index.vue';
import { useDictionaryStore, useUserStore } from '@/store';
import { messageTemplateCRUD } from '@/api/config/message-template';
import { MessagePlugin } from 'tdesign-vue-next';
import { getSimpleUserList } from '@/api/system/user';
import { getSimpleDeptList } from '@/api/system/dept';
import listToTree from '@/utils/listToTree';
// 用户仓库
const userStore = useUserStore();
// 字典仓库
const dictionaryStore = useDictionaryStore();
// props
const props = defineProps({
  // 话题id
  id: {
    type: Number,
    required: true,
  },
  // 接收人
  senders: {
    type: Array,
    required: true,
  },
  readonly: {
    type:Boolean,
    default:false
  }
});
// emits
const emits = defineEmits(['requestSuccess']);
// 自定义对话框ref
const customDialogRef = useTemplateRef('customDialogRef');
// 处理打开对话框
const handleOpenDialog = (mode: 'create' | 'read' | 'update', params: Record<string, any>) => {
  customDialogRef.value.open(mode, params);
};
// 处理对话框请求成功
const handleDialogRequestSuccess = (result: Record<string, any>) => {
  emits('requestSuccess', result);

};
interface userTreeData {
  id: string | number;       // 节点唯一标识（可能是用户ID或部门ID）
  deptId?: string | number;  // 部门ID（仅部门节点可能有）
  name: string;             // 节点显示名称（部门名或用户名）
  parentId: string | number; // 父节点ID（用于构建树形结构）
  children?: userTreeData[]; // 子节点（`listToTree` 可能会自动添加）
}
const sendersTree = ref([])
const handleGetUserTree = () => {
  Promise.all([getSimpleDeptList(),getSimpleUserList()])
  .then((res) => {
    const arr: userTreeData[] = []
    console.log(res,'pp');
    
    res[0].forEach((item: any) => {
      arr.push({
        id: `dept_${item.id}`,
        deptId:`dept_${item.id}`,
        name: item.name,
        parentId: item.parentId?`dept_${item.parentId}`:'',
      });
    });
    res[1].forEach((item: any) => {
      arr.push({
        id:item.id,
        name:item.nickname,
        parentId: item.deptId?`dept_${item.deptId}`:'',
      })
    })
    sendersTree.value = listToTree(arr, 'deptId').filter(item => item.id === 'dept_100') 
  })
  .catch(() => {
    sendersTree.value = []
  })
}
handleGetUserTree()
</script>
